<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <script src="/js/jquery-3.4.1.min.js"></script>
    <link rel="stylesheet" href="/css/bootstrap.min.css">


    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="/plugins/bootstraptable/bootstrap-table.min.css">
    <style>
        .msg{
            display: none;
            color: red;
            padding-left: 20px;

        }
        .msg1{
            display: none;
            color: red;
            padding-left: 20px;

        }
        .displayb{
            display: inline-block;
            transition: display 2s linear;
        }
    </style>
</head>
<body>

<div class="bgc">
    <div class="box">
        <h2>登录页面</h2>
        <hr>
        <form class="input_container">
            <div class="form-group">
<!--                <label for="userName">姓名</label>-->
                <input type="text" class="form-control ipt" id="userName" placeholder="请输入姓名" name="name">
                <p class="msg">请输入1-11位</p>
            </div>
            <div class="form-group">
<!--                <label for="password">密码</label>-->
                <input type="password" class="form-control ipt1" id="password" placeholder="请输入密码" name="password" style="margin-top: 13px">
                <p class="msg1">请输入1-11位</p>
            </div>

            <div>
                <input  id="code" placeholder="验证码" type="text" class="code" style="margin-top: 3px;width: 200px">
                <img onclick="getvCode()" id="verifyimg" style="margin-left: 10px; margin-top: 2px" alt="图片挂了"/>
            </div>

            <button type="button" class="btn btn-primary btn1" onclick="login();" style="margin-top: 15px">登录</button>
        </form>
    </div>
</div>

<script src="/js/jquery-3.4.1.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/plugins/bootstraptable/bootstrap-table.min.js"></script>
<script src="/plugins/bootstraptable/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="/js/msg.js"></script>
<script>

    /**
     * 表单位数验证
     */
    let ipt = document.querySelector(".ipt");
    let msg = document.querySelector(".msg");
    // 失去焦点
    ipt.onblur = function (){
        if (this.value.length < 1 || this.value.length > 11){
            msg.className = " msg displayb"
            msg.innerHTML = "请输入1-11位"
        }else{
            msg.className = "msg"
        }
    }

    let ipt1 = document.querySelector(".ipt1");
    let msg1 = document.querySelector(".msg1");
    // 失去焦点
    ipt1.onblur = function (){
        if (this.value.length < 1 || this.value.length > 11){
            msg1.className = " msg1 displayb"
            msg1.innerHTML = "请输入1-11位"
        }else{
            msg1.className = "msg1"
        }
    }

    /**
     * 调用显示验证码
     */
    $(function (){
        getvCode();
    })
    /**
     * 获取验证码
     * 将验证码写到login.html页面的id = verifyimg 的地方
     */
    function getvCode() {
        document.getElementById("verifyimg").src = timestamp("/webapi/verifycode/querycode");
    }
    //为url添加时间戳
    function timestamp(url) {
        var getTimestamp = new Date().getTime();
        if (url.indexOf("?") > -1) {
            url = url + "&timestamp=" + getTimestamp
        } else {
            url = url + "?timestamp=" + getTimestamp
        }
        return url;
    };

    function login(){
        let name = $("#userName").val();
        let password = $("#password").val();
        let code = $("#code").val();
        console.log(name)
        console.log(password)
        if (name == null){
            message.showText("error","用户名不能为空");
        }else if(password == null){
            message.showText("error","密码不能为空");
        }else{
            $.ajax({
                url:"/webapi/login/user",
                data:{
                    username:name,
                    password:password,
                    code:code
                }
            }).done(function (rs){
                console.log(rs)
                if(rs.code >= 200 && rs.code < 300){
                    //成功
                    message.showText("success","登录成功")
                    window.setTimeout(function (){
                        window.location.href = "/student/index"
                    },1000)

                }else if (rs.code === 400){
                    message.showText("error",rs.msg);
                }
                else{
                    message.showText("error","您的用户名或密码不对")
                }
            });
        }

    }
</script>
</body>
</html>